<!-- Main -->
<div class="jumbotron">
  <div class="container text-center"  ;>
    <h1 id="banniere_titre"><img src="<?php echo BASE_URL; ?>/webroot/img/logo/logo-brocante.png" style="height:80px" alt="Brocantes.com" />Brocantes.com<p id="banniere_titre">Site référence pour toutes les brocantes de France</p></h1>  
    <button class="btn btn-xs btn-facebook"><i class="fa fa-facebook"></i> | Page Facebook</button>
    <button class="btn btn-xs btn-twitter"><i class="fa fa-twitter"></i> | Page Twitter</button>
  </div>
</div>

<div class="container">
  <div class="alert alert-info alert-dismissible" role="alert" id="alertinfo">
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    Bienvenue. Une brocante se passe dans votre ville et vous voulez la faire connaître?<br>Veuillez utiliser le formulaire de <a href="<?php echo Router::url('contacts/index'); ?>">Contact</a> ou n'hésitez pas à utiliser notre page Facebook et notre compte Twitter. Merci :)</a>
  </div>
  
  <div class="row featurette">
    <div class="col-md-6" style="text-align:center">
      <!--<img class="featurette-image img-responsive" src="css/img/carte-de-france.jpg" alt="Carte de France">-->
      <p class="lead" id ="bouton_geo"><button type="button" class="btn btn-primary btn-default" onClick="javascript:onGeoClick()"><span  class="glyphicon glyphicon-map-marker"></span> Géolocaliser les brocantes</button></p>

      <div id="francemap" class="center-block"></div>
    </div>
    <div class="col-md-6"  style="text-align:center">
      <div id="titre" class="jumbotron">
        <h2>brocantes.com c'est :</h2>
        <h4>- un espace regroupant toutes les brocantes de France</h4>
        <h4>- un site moderne adapté autant aux grands qu'aux petits écrans.</h4>
        <br>
        <h3>Pour commencer, sélectionner une région ...</h3>
        <h3 id ="geolocalisation">ou lancer la géolocalisation <a class="btn btn-primary" role="button" onClick="javascript:onGeoClick()"><span  class="glyphicon glyphicon-map-marker"></span></a></h3>
      </div>

    </div>
    <div id="toggle" class="col-md-6" style="text-align:center">
      <div class="well">
        <legend class="the-legend">Maintenant, veuillez choisir un département</legend>


        <div id="dept" class="list-group">
        </div>
      </div>
    </div>
  </div>

  <div id="element_to_pop_up" style="text-align:center">
        <span class="button b-close"><span>X</span></span>
        <b>Géolocalisation<br>des brocantes<br>en cours ...</b><br><br>
        <img class="img-responsive center-block" src="<?php echo BASE_URL.'/webroot/img/gif/loader.gif'; ?>" alt="Géolocalisation en cours ...">
  </div>
  <script src="<?php echo BASE_URL; ?>/webroot/js/jquery.vmap.js" type="text/javascript"></script>
  <script src="<?php echo BASE_URL; ?>/webroot/js/jquery.vmap.france.js" type="text/javascript"></script>

  <script type="text/javascript">

  function onGeoClick()
  {
    if (navigator.geolocation)
    {
      var bPopup = $('#element_to_pop_up').bPopup({
        positionStyle: 'fixed', //'fixed' or 'absolute'
        speed: 650,
              transition: 'slideIn',
          transitionClose: 'slideBack'
      }
        );
      navigator.geolocation.getCurrentPosition(function(position)
      {
          //alert("Latitude : " + position.coords.latitude + ", longitude : " + position.coords.longitude);
          $(location).attr('href',"<?php echo BASE_URL; ?>"+"/brocantes/geo/"+position.coords.latitude+"/"+position.coords.longitude+"/"+15);
          bPopup.close();
        });
    }
    else
      alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
  };

  $(document).ready(function() {
         // On cache la zone de texte
         jQuery('#toggle').hide();

         var numRegion = 0;

         var top = $("#titre").offset().top;

         $('#francemap').vectorMap({
          map: 'france_fr',
          hoverOpacity: 0.5,
          hoverColor: "#f6b460",
          backgroundColor: "#ffffff",
          color: "#faa12e",
          borderColor: "#000000",
          selectedColor: "#DF4700",
          enableZoom: false,
          showTooltip: true,
          onRegionClick: function(element, code, region)
          {
            if (code != numRegion)
            {
                //Si numRegion == 0, on affiche les départements
                if (numRegion == 0){
                  jQuery('#titre').toggle(400);
                  jQuery('#toggle').toggle(400);
                }
                numRegion = code;

               // alert(numRegion + ' - ' + region);            

               $('html,body').animate({scrollTop: top-150}, 'slow');   

               //return false;

             }


             $.ajax({
              type: "POST",
              url: "<?php echo BASE_URL; ?>/accueil/index/"+numRegion,
              dataType : 'json', 
              data: numRegion,
              cache : false,

              success : function(data){
                        //console.log(data['accueils'].length);
                         $("#dept").children().remove();
                         $.each(data['accueils'],function(i,objet){
                                 // console.log(i);
                                  //console.log(longg);

                                 $("#dept").append("<a id=\"depgt\" href=\"<?php echo BASE_URL; ?>/brocantes/dept/"+data['accueils'][i]['numDepartement']+"\" class=\"list-group-item\">"+data['accueils'][i]['nom']+"</a>"); 
                               });                                
                       },

                       error : function(data){
                        alert("Erreur");
                      }
                    });


           }

         });
});
</script>
